import {
  Directive,
  ElementRef,
  HostListener,
  Inject,
  Input,
  OnInit,
  OnChanges,
  SimpleChanges,
  SimpleChange
} from "@angular/core";

@Directive({
  selector: "[appChange]"
})
export class ChangeDirective implements OnInit, OnChanges {
  @Input()
  val: string;

  @Input()
  hasArrow = true;

  defaultVal: string;

  count = 0;

  el: ElementRef;

  constructor(
    el: ElementRef,
    @Inject("RegService") private regServie,
    @Inject("StoreService") private storeService,
    @Inject("UtilsService") private utilsService
  ) {
    this.el = el;
  }

  ngOnInit(): void {}

  setColor(color: string) {
    this.el.nativeElement.style.color = color;
  }

  setInnerHtml(html: string) {
    this.el.nativeElement.innerHTML = html;
  }

  ngOnChanges(changes: SimpleChanges) {
    const val: SimpleChange = changes.val;
    // console.log(this.el, 9999, Number(val), val);
    if (Number(val.currentValue) > 0) {
      this.setColor("rgb(60, 181, 124)");
      this.setInnerHtml(
        `${Number(Number(val.currentValue) * 100).toFixed(1)}% ${
          this.hasArrow
            ? '<i class="icon iconfont" style="font-size: 12px;color:rgb(60, 181, 124)">&#xe624;</i>'
            : ""
        }`
      );
    }

    if (Number(val.currentValue) <= 0) {
      this.setColor("rgb(223, 108, 79)");
      this.setInnerHtml(
        `${Number(Number(val.currentValue) * 100).toFixed(1)}% ${
          this.hasArrow
            ? '<i class="icon iconfont" style="font-size: 12px;color:rgb(223, 108, 79)">&#xe621;</i>'
            : ""
        }`
      );
    }
  }
}
